<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2023-11-20 10:39:06
 * @Description: 
-->
<template>
  <div>
    <section class="banner">
      <img src="/imgs/banner.jpg" alt="" class="w-full">
    </section>
    <ParallaxBox bgColor="#a4a196">
      <div class="sm:h-[100px] lg:h-[280px]">
      </div>
    </ParallaxBox>
    <nuxt-link to="/about" tag="div" data-aos="fade-up">
      <Gallery :img-list="imgList" :navigation="false" :loop="false" costomCls="noNavigation"
        v-slot="{ item }: { item: any }">
        <div class="gallery-costom">
          <img class="w-full" :src="item" alt="">
          <div class="half-linebreak"></div>
          <p class="link">關於我們 | About Us</p>
        </div>
      </Gallery>
    </nuxt-link>
    <ParallaxBox bg-color="#a4a196">
      <div class="sm:h-[100px] lg:h-[280px]">
      </div>
    </ParallaxBox>
    <article class="list vertical">
      <div data-aos="fade-up" class="list__col-1-2 aos-init" :data-aos-once="false">
        <nuxt-link class="link link-details hoverAni" to="/project">
          <div class="square">
            <div class="square__inner">
              <img src="/imgs/pro.jpg" sizes="100vw" class="image image--loaded image--full-width">
            </div>
          </div>
          <div class="half-linebreak"></div>
          <div class="link-textmargin">
            項目 | PROJECTS
          </div>
          <div class="link-arrow arrow-hitbox">
            <svg class="link-arrow__right" width="24" height="24" viewBox="0 0 24 24" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M11.9498 24L0 12.3515L0.903766 11.4477L11.3473 21.59V0H12.6527V21.59L23.0962 11.4477L24 12.3515L11.9498 24Z"
                fill="black"></path>
            </svg>
          </div>
        </nuxt-link>
      </div>
      <div class="mobile-linebreak"></div>
      <div data-aos="fade-up" class="list__col-1-2 " :data-aos-once="false" :data-aos-delay="200">
        <nuxt-link class="link link-details hoverAni" to="/products">
          <div class="square">
            <div class="square__inner">
              <img src="/imgs/product1.png" sizes="100vw" class="image image--loaded image--full-width">
            </div>
          </div>
          <div class="half-linebreak"></div>
          <div class="link-textmargin">
            產品 | PRODUCTS
          </div>
          <div class="link-arrow arrow-hitbox">
            <svg class="link-arrow__right" width="24" height="24" viewBox="0 0 24 24" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M11.9498 24L0 12.3515L0.903766 11.4477L11.3473 21.59V0H12.6527V21.59L23.0962 11.4477L24 12.3515L11.9498 24Z"
                fill="black"></path>
            </svg>
          </div>
        </nuxt-link>
      </div>
    </article>
    <ParallaxBox bg-color="#a4a196">
      <div class="lg:h-[280px] w-full sm:h-[100px]"> </div>
    </ParallaxBox>
    <div class="dbl-linebreak"></div>
    <div class="list" data-aos="fade-in">
      <div class="flex flex-row">
        <div class="textBlockLining">Featured </div>
        <div class="textBlockLining ml-[5px]">Press</div>
      </div>
      <nuxt-link class="link link-textmargin" to="/press">View all</nuxt-link>
    </div>
    <div class="half-linebreak"></div>
    <PressContent :list="pressList"></PressContent>
    <div class="dbl-linebreak"></div>
    <div class="flex flex-row justify-center">
      <nuxt-link to="/contact">
        <HoverButtons btnText="Contact us" data-aos="zoom-in" />
      </nuxt-link>
    </div>
    <div class="dbl-linebreak"></div>
  </div>
</template>

<script setup lang="ts">
const imgList = ref(['/imgs/index01.jpg', '/imgs/index01.jpg']);
const pressList = ref([
  {
    title: '2022年度国际空间设计艾特奖 集舍研造',
    subTitle: 'TOP450  集舍研造|住宅設計',
    img: 'https://jsyz2015.oss-cn-guangzhou.aliyuncs.com/static/imgprize1.jpg',
    // prize: "https://jsyz2015.oss-cn-guangzhou.aliyuncs.com/static/prize1.jpg",
  },
  {
    title: '2016 艾特獎 Idea-Tops 2016 集舍研造',
    subTitle: '最佳空間入圍獎   集舍研造|住宅設計',
    img: 'https://jsyz2015.oss-cn-guangzhou.aliyuncs.com/static/imgprize2.jpg',
    // prize: "https://jsyz2015.oss-cn-guangzhou.aliyuncs.com/static/prize2.png",
  },
  {
    title: '2019 義大利A’DESIGNAWARD',
    subTitle: 'AWARD COMPETITION 集舍研造',
    img: 'https://jsyz2015.oss-cn-guangzhou.aliyuncs.com/static/imgprize3.jpg',
    // prize: 'https://jsyz2015.oss-cn-guangzhou.aliyuncs.com/static/prize3.png',
  },
])
</script>

<style lang="scss" scoped>
.square {
  position: relative;
  overflow: hidden;
  width: 100%
}

.square:before {
  background-color: white;
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%
}

.square .square__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f1f1f1
}


.gallery-costom {
  width: 80%;
  margin: 10vh auto;

  .text-link {
    font-size: 16px;
  }

  &:hover {
    filter: brightness(75%);
  }
}

@media screen and (max-width: 767px) {
  .gallery-costom {
    width: 90%;
    margin: 5vh auto;
  }

  .link {
    font-size: 14px;
  }
}
</style>
